<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>白膜-geowebcache发布的arcgis3857坐标</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="http://192.168.1.90:8088/mapboxgl/mapbox/mapbox-gl.css" rel="stylesheet">
    <script src="http://192.168.1.90:8088/mapboxgl/mapbox/mapbox-gl.js"></script>
    <link href="http://192.168.1.90:8088/mapboxgl/mapbox-gl-draw/mapbox-gl-draw.css" rel="stylesheet">
    <script src="http://192.168.1.90:8088/mapboxgl/mapbox-gl-draw/mapbox-gl-draw.js"></script>
    <script src="http://192.168.1.90:8088/mapboxgl/turf.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #area {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.7);
            padding: 10px;
            font-size: 14px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="area">面积: 0 亩</div>
<script>

    let wmtsSource = {
        'type': 'raster',
        'tiles': [
            'http://192.168.1.90:18080/geowebcache/service/wms?LAYERS=haianblue&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}&WIDTH=256&HEIGHT=256'
        ],
        'tileSize': 256
    };
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWRtaW4tbHVjYXMiLCJhIjoiY2xrcm5jcDFnMGJvMjNmbjNrdWh1dDQ3biJ9.gW0WN4QSSl1EZPmgrhUc0Q';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: {
            //设置版本号，一定要设置
            "version": 8,
            //添加来源
            "sources": {
                "wmtsSource": wmtsSource
            },
            "layers": [
                {
                    //图层id，要保证唯一性
                    "id": "wmtsLayer",
                    //图层类型
                    "type": "raster",
                    //数据源
                    "source": "wmtsSource",
                    "paint": {
                        "raster-opacity": 0.8
                    },
                    //图层最小缩放级数
                    "minzoom": 0,
                    //图层最大缩放级数
                    "maxzoom": 18
                }
            ]
        },
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        center: [120.46292388403401, 32.53487644346701],
        zoom: 15,
        maxZoom: 18,// 设置最大缩放层级为14
        pitch: 70,
        bearing: 0
    });

    map.on('load', function () {
        map.addSource("mapillary", {
            "type": "vector",
            // 'scheme':'tms',
            "tiles": [
                'http://192.168.1.90:8088/haian/pbf/{z}/{x}/{y}.pbf'
            ],
            "minzoom": 1,
            "maxzoom": 17
        })
        map.addLayer({
            "id": "mapillary", // Layer ID
            "type": "fill-extrusion",
            "source": "mapillary", // ID of the tile source created above
            "source-layer": "builds", // 确保 source-layer 与 MVT 服务中的实际层名称一致
            "paint": {
                "fill-extrusion-color": "#329aef",
                "fill-extrusion-height": [
                    "*", // 使用乘法表达式
                    ["get", "FLOOR"], // 获取 "FLOOR" 字段值
                    3 // 乘以 3 米
                ],
                "fill-extrusion-base": 0,
                "fill-extrusion-opacity": 1
            }
        });


// 定义一个变量来存储当前高亮的楼层ID
        let highlightedFeatureId = null;


// 监听用户点击地图事件
        map.on('click', 'mapillary', function(e) {
            // 获取点击位置的特征数据
            const features = map.queryRenderedFeatures(e.point, {
                layers: ['mapillary']  // 仅查询 "mapillary" 图层中的特征
            });

            if (features.length > 0) {
                const feature = features[0];  // 假设只选择一个特征
                const properties = feature.properties;  // 获取该特征的属性
                const floorHeight = properties.FLOOR * 3;  // 将楼层数乘以 3 米

                // 在控制台打印特征信息
                console.log('Selected Feature:', properties);

                // 创建弹窗展示特征信息
                new mapboxgl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(`<h3>建筑物信息</h3>
                      <p>楼层: ${properties.FLOOR}</p>
                      <p>楼高: ${floorHeight} 米</p>
                      <p>对象ID: ${properties.OBJECTID}</p>`)
                    .addTo(map);

                // 高亮选中的楼层
                const highlightColor = "#FF6347"; // 高亮颜色，例如 "tomato"

                // 如果之前有高亮的楼层，恢复其默认颜色
                if (highlightedFeatureId !== null) {
                    map.setPaintProperty('mapillary', 'fill-extrusion-color', [
                        "case",
                        ["==", ["get", "OBJECTID"], highlightedFeatureId], "#329aef", // 恢复原色
                        "#329aef" // 默认颜色
                    ]);
                }

                // 更新高亮楼层的ID
                highlightedFeatureId = properties.OBJECTID;

                // 设置当前楼层为高亮颜色
                map.setPaintProperty('mapillary', 'fill-extrusion-color', [
                    "case",
                    ["==", ["get", "OBJECTID"], highlightedFeatureId], highlightColor, // 如果选中则高亮
                    "#329aef" // 其他保持默认颜色
                ]);
            }
        });

        // 初始化mapbox-gl-draw插件
        var Draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                polygon: true,
                trash: true
            }
        });

        // 将绘图工具添加到地图
        map.addControl(Draw);

        // 监听绘制事件
        map.on('draw.create', updateArea);
        map.on('draw.update', updateArea);
        map.on('draw.delete', updateArea);

        // 更新面积显示的函数
        function updateArea() {
            // 清空之前的绘制内容
            // Draw.deleteAll();

            var data = Draw.getAll();
            var area = 0;

            // 如果绘制了多边形，计算其面积
            if (data.features.length > 0) {
                var geojson = data.features[0];
                area = turf.area(geojson); // 计算面积
                area = (area * 0.0015).toFixed(2); // 转换为平方千米并保留两位小数
            }

            // 更新面积信息显示
            document.getElementById('area').innerText = '面积: ' + area + ' 亩';
        }

    });



</script>

</body>
</html>
